<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>累了就休息会儿</title>
    <script src="js/adaptive.js"></script>
    <style>

        @keyframes spin{
            0%{
                transform: rotateX(0) rotateY(0);
            }

            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        html{
            height: 100%;
        }
        body{
            margin:0;
            height:100%;
            /* 渐变背景色 */
            background: radial-gradient(white,black);
            display:flex;
            justify-content:center;
            align-items: center;

            /* 设置3D视野 */
            perspective: 10rem;
        
        }

        #box{
            width:3rem;
            height:3rem;
            border:solid 0.04rem red;
            /* 自身发生变形时，保留子元素的3D表型线索. */
            transform-style: preserve-3d;

            /* transform:rotateY(30deg) rotateX(30deg); */

            animation-name: spin;
            animation-duration:10s;
            animation-timing-function:linear;
            animation-iteration-count:infinite;
        }
        .pic{
            width:3rem;
            height:3rem;
            position:absolute;
            left:0;
            top:0;

            transition: all 1s;

            box-sizing: border-box;
            border:solid 0.05rem white;
        }

        .spic{
            width:1.5rem;
            height:1.5rem;
            position:absolute;
            left: 0.75rem;
            top: 0.75rem;
        }
        #s-front{
            transform:translateZ(-0.75rem);
        }
        
        #s-back{
            transform: translateZ(0.75rem);
        }
         
        
        #s-top{
            transform:translateY(-0.75rem) rotateX(90deg);
        }
         


        #s-bottom{
            transform:translateY(0.75rem) rotateX(90deg);
        }
         
        
        
        #s-left{
            transform: translateX(-0.75rem) rotateY(90deg);
        }
         
        
        
        #s-right{
            transform: translateX(0.75rem) rotateY(90deg);
        }
         
        #front{
            transform:translateZ(-1.5rem);
        }
        #box:hover #front{
            transform:translateZ(-2.4rem)
        }
        
        #back{
            transform: translateZ(1.5rem);
        }
        #box:hover #back{
            transform: translateZ(2.4rem);
        }
        
        #top{
            transform:translateY(-1.5rem) rotateX(90deg);
        }
        #box:hover #top{
            transform:translateY(-2.4rem) rotateX(90deg); 
        }


        #bottom{
            transform:translateY(1.5rem) rotateX(90deg);
        }
        #box:hover #bottom{
            transform:translateY(2.4rem) rotateX(90deg);
        }
        
        
        #left{
            transform: translateX(-1.50rem) rotateY(90deg);
        }
        #box:hover #left{
            transform: translateX(-2.4rem) rotateY(90deg);
        }
        
        
        #right{
            transform: translateX(1.5rem) rotateY(90deg);
        }
        #box:hover #right{
            transform: translateX(2.4rem) rotateY(90deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/小易/xiaoyi10.jpg" alt="" class="pic" id="front">
        <img src="img/小易/xiaoyi60.jpg" alt="" class="pic" id="back">
        <img src="img/小易/xiaoyi50.jpg" alt="" class="pic" id="top">
        <img src="img/小易/xiaoyi40.jpg" alt="" class="pic" id="bottom">
        <img src="img/小易/xiaoyi30.jpg" alt="" class="pic" id="left">
        <img src="img/小易/xiaoyi20.jpg" alt="" class="pic" id="right"> 
        
        <img src="img/小易/xiaoyi54.jpg" alt="" class="spic" id="s-front">
        <img src="img/小易/xiaoyi67.jpg" alt="" class="spic" id="s-back">
        <img src="img/小易/xiaoyi16.jpg" alt="" class="spic" id="s-top">
        <img src="img/小易/xiaoyi13.jpg" alt="" class="spic" id="s-bottom">
        <img src="img/小易/xiaoyi19.jpg" alt="" class="spic" id="s-left">
        <img src="img/小易/xiaoyi80.jpg" alt="" class="spic" id="s-right">
        
    </div>

    
</body>
</html>